
<template>
	<div>
		<h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
		<!-- <h1 id="title">软件售后管理系统首页</h1> -->
		<div class="big-box">
		<div class="img-box">
			<div
			class="show-box"
			:style="{
				transform: 'translateX(' + translate + 'px)',
				transition: tsion ? 'all 0.5s' : 'none',
			}"
			>
			<img src="../assets/image-1.jpg" />
			<img v-for="(item, index) in src" :key="index" :src="item.img"  />
			<img src="../assets/image-4.jpg"  />
			</div>
		</div>
		<div class="arrowhead-box" ref="swiper">
			<span @click="last"><img src="../assets/arrow-left.png"  style="height:50px ;width:50px"></span>
			<span @click="next"><img src="../assets/arrow-left.png"  style="height:50px ;width:50px"></span>
		</div>
		<div class="swiper-boxs" ref="swiper">
			<span v-for="(item, index) in src" :key="index"></span>
		</div>
		</div>


		<div id="table">
          
          <div class="pb10px">
            
            <!-- ctrl+alt+l 格式化代码   -->
            <el-input v-model="searchForm.perName" @input="handleSearch" class="input1" clearable placeholder="请输入问题名称"
                      size="small" ></el-input>
            <el-button type="primary" icon="el-icon-search" size="small" class="mr10px" @click="handleSearch">搜索</el-button>
          </div>
      
          <!-- <div>
            <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
            <el-button type="danger" size="small" @click="batchDelete" :disabled="ids.length>0?false:true">批量删除
            </el-button>
          </div> -->
      
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="id"
                label="ID"
                width="100">
            </el-table-column>
            <el-table-column
                prop="problemDescription"
                label="问题名称"
                width="260">
            </el-table-column>
			<el-table-column
                prop="evaluate"
                label="评价"
                width="200">
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态"
                width="100">
            </el-table-column>
			<el-table-column
                prop="createDate"
                label="提出时间"
                width="200">
            </el-table-column>
			<el-table-column
                prop="updateTime"
                label="更新时间"
                width="200">
            </el-table-column>
			
            <!-- fixed="right"-->
            <el-table-column label="操作"
                             width="300"
            >
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">评价
                </el-button>
                <!-- index索引 scope.row这一条数据所有的值 -->
				<el-button
					size="mini"
					type="primary"
					@click="handle(scope.$index, scope.row)">修改状态
				</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
      
          <!--自定义分页组件-->
          <custom-pages
              @current-change="currentChange"
              @size-change="sizeChange"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              :current-page="pageInfo.pageNum"
          >
          </custom-pages>
          <!--自定义分页组件-->
        

          <!-- 自定义抽屉组件-->
          <custom-drawer
              :form-data="formData"
              :rules-form="ruleForm"
              @close-drawer="closeDrawer"
              @submit-drawer="submitDrawer"
              :is-drawer-dialog="isDrawerDialog"
          >
            <div slot="content">
              <el-form-item label="评价" prop="evaluate" v-if="judge1=='2'">
                <el-input v-model="formData.evaluate" placeholder="请输入评价"></el-input>
              </el-form-item>

              <el-form-item label="状态" prop="state" v-if="judge1=='1'" >
              <el-select v-model="formData.state" placeholder="请选择状态" >
                <el-option
                  v-for="item in  options"
                  :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
              </el-form-item>

            </div>
          </custom-drawer>
          <!--自定义抽屉组件 -->
    
          <el-dialog
            title="提示"
            :visible.sync="error"
            width="30%"
            append-to-body
            top="20%"
            ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
            <span>{{ message }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="error = false">取 消</el-button>
                <el-button type="primary" @click="error = false">确 定</el-button>
            </span>
            </el-dialog>
        </div>

		
		
	</div>
  </template>
   
  <script>
  

  import create from "@/mixins/create";
  import http from "@/utils/request.js"
  export default {
	
	data() {
	  return {
		src: [
		  { img: require("../assets/image-1.jpg") },
		  { img: require("../assets/image-2.jpg") },
		  { img: require("../assets/image-3.jpg") },
		  { img: require("../assets/image-4.jpg") },	  
		],
		translateX: 0,
		tsion: true,

		api: {
              pageUrl: "/home/selectallproblem",
              saveUrl: "/home/updateproblemevaluate",//评价
              delUrl: "/home/deleteproblem",//删除评价
              modUrl: "/home/updateproblemstate",//修改状态
            },
            ruleForm: {
			  evaluate: [
                {required: true, message: '请输入评价', trigger: 'blur'},
              ],
              state: [
                {required: true, message: '请输入状态', trigger: 'blur'},
              ],
            },
      
            formData: {
              id: null,
              evaluate: "", //评价
              state: "", //状态
            },
            searchForm: {
              perName: ""
            },
            message:'',
            options: [{
              value: '未处理',
              label: '未处理'
            }, {
              value: '处理中',
              label: '处理中'
            }, {
              value: '已处理',
              label: '已处理'
            },],
            value: ''
	  };
	},
	mixins: [create],
    created() {
    },
	methods: {
	  last() {
		this.translateX--;
		this.tsion = true;
		if (this.translateX < 0) {
		  setTimeout(() => {
			this.tsion = false;
			this.translateX = this.src.length - 1;
		  }, 500);
		}
	  },
	  next() {
		this.translateX++;
		this.tsion = true;
		if (this.translateX > this.src.length - 1) {
		  setTimeout(() => {
			this.tsion = false;
			this.translateX = 0;
		  }, 500);
		}
	  },
	  swiper(i) {
		this.translateX = i;
	  },

	  //修改状态   
	  handle(index, row) {
            sessionStorage.setItem('judge',1)
            this.updateMyVar()
            // console.log(this.judge1)//
            this.isDrawerDialog = true
            // console.log(index, row);
            this.formData = Object.assign({}, row)
        },
	  submitDrawer(e) {
            //修改状态
            if(sessionStorage.getItem('judge') == '1'){
                const params = new URLSearchParams();
                params.append('state', this.formData.state);
                params.append('problemId', this.formData.id);
                http.put(`${this.api.modUrl}?${params.toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        // this.$message({
                        //     message: res.data.msg,
                        //     type: 'error'
                        // });
                        this.getList()
                    }
                })
            }
            //评价问题
            else if(sessionStorage.getItem('judge') == '2'){
                const params1 = new URLSearchParams();
                params1.append('evaluate', this.formData.evaluate);
                params1.append('problemId', this.formData.id);
                http.put(`${this.api.saveUrl}?${params1.toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                        // this.$message({
                        //       message: res.data.msg,
                        //       type: 'error'
                        //   });
                      }
                })
            }
        },
		//单个删除
        handleDelete(index, row) {
            // console.log(index, row);
            this.ids = [row.id]
            // this.batchDelete()
            const id =this.ids[0];
            let formData1 = {
                problemId: id,//
            };
            //
            this.$confirm(`此操作将永久删除ID为[${this.ids[0]}]的数据, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                http.delete(`${this.api.delUrl}?${new URLSearchParams(formData1).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                    }
                })
            }).catch(() => {
                // this.message=res.data.msg,
                // this.error=true,
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                this.$refs.multipleTable.clearSelection();
            });
        },
	},
	mounted() {
	  setInterval(() => {
		this.next();
	  }, 3000);
	},
	computed: {
	  translate() {
		return -(this.translateX + 1) * 1050;
	  },
	},
	watch: {
	  translateX: {
		handler(val) {
		  let a = this.$refs.swiper.querySelectorAll("span");
		  a.forEach((element) => {
			element.style.width = "12px";
		  });
		  if (this.translateX < 0) {
			val = this.src.length - 1;
		  }
		  if (this.translateX > this.src.length - 1) {
			val = 0;
		  }
		  a[val].style.width = "100px";
		},
	  },
	},
	
  };
  </script>
  <style scoped>
	
  .notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */

  #title{
	font-size:25px;/*字体大小 */
    text-align: center;/*位置居中 */
	margin-top: 5px;
	margin-bottom: 5px;
  }	

  .input1{
    width: 260px;
  }
  #table{
	margin-top: 25%;
  }

  body {
	margin: 0;
	padding: 0;
	background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
  }
  span {
	margin: 0;
	padding: 0;
  }
  .big-box {
	width: 1050px;
	height: 300px;
	background-color: #999;
	margin: 10px auto;
	/* position: fixed;
	top: 22%;
	left: 15%; */
	position: absolute;
	margin-top: 1%;
	margin-left: 10%;
	box-shadow: 0 0 3pc rgb(0, 0, 0, 0.4);
  }
  .img-box {
	overflow: hidden;
	height: 100%;
	width: 100%;
  }
  .show-box {
	display: flex;
	height: 100%;
	width: 100%;
	transition: all 0.5s;
  }
  .show-box img {
	float: left;
	min-width: 1050px;
	min-height: 400px;
  }
  .arrowhead-box {
	position: absolute;
	top: 40%;
	float: left;
	width: 100%;
	height: 50px;
  }
  .arrowhead-box span {
	float: left;
	display: block;
	height: 60px;
	border-radius: 50px;
	/* background: url("../assets/img/banner2.jpg") no-repeat; */
	/* background-color: rgb(0, 0, 0, 0.4); */
	background-position: 6px 14px;
	cursor: pointer;
	opacity: 0.5;
  }
  .arrowhead-box span:nth-child(2) {
	float: right;
	transform: rotate(180deg);
  }
  .arrowhead-box span:hover {
	opacity: 1;
  }
  .swiper-boxs {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
   
  }
  .swiper-boxs span {
	float: left;
	width: 12px;
	height: 12px;
	background-color: white;
	border-radius: 50px;
	margin-left: 10px;
	cursor: pointer;
	transition: all 0.5s;
  }
  .swiper-boxs span:nth-child(1) {
	width: 100px;
  }
  </style>
  